<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>select2 Demo</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"><!--bootstrap样式-->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script><!--jQuery-->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script><!--bootstrap-->
    <script src="https://cdn.bootcss.com/select2/4.0.4/js/select2.js"></script><!--select2-->
    <script src="https://cdn.bootcss.com/select2/4.0.4/js/i18n/zh-CN.js"></script><!--select2语言包-->
    <link href="https://cdn.bootcss.com/select2/4.0.4/css/select2.css" rel="stylesheet"><!--select2样式-->
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"><!--awesome图标库-->
    <style>
        html, body {
             height: 100%;
        }
        img {
            width: 50px;
            height: 50px
        }
        .select2-result-repository__avatar {
            float: left;
            width: 60px;
            margin-right: 10px;
        }
        .select2-result-repository__meta {
            margin-left: 70px;
        }
        .select2-result-repository__title {
            color: black;
            font-weight: 700;
            word-wrap: break-word;
            line-height: 1.1;
            margin-bottom: 4px;
        }
        .select2-result-repository__statistics div {
            margin-right: 5px;
            display: block;
            float: left;
        }
    </style>
    <script>

        function skillInfoList() {
            $.ajax({
                url:'/nc/bmxxb/getbmxx/',
                type:'GET',
                data:{
                },
                dataType:'json',
                success:function (data) {
                    if(data !=undefined && data !=null && (data.ret == 0 ||data.ret =="0")){
                        $("#shiyr_select").select2({         // $(".").select2({ }) 语句将div渲染成下拉框 。
                        //data: data.obj, //根据ajax获得的数据
                            data:[{"id":"1","text":"技能1"},{"id":"2","text":"技能2"}],//已知下拉选项是什么，直接写死。
                            placeholder:'请选择',
                            allowClear:true
                        })
                    } else{
                        alert(data.message);
                    }
                }
            })
    </script>
</head>
<body>
<div class="row">
    <div class="col-lg-12">
        <section class="panel">
            <div class="panel-body">
                <form class="form-horizontal">           
                    <div class="form-group"><label class="col-lg-1 col-md-1 control-label">ajax数据源</label>
                        <div class="col-lg-11 col-md-11">
                            <select class="form-control select2" id="shiyr_select"></select>
                        </div>
                    </div>
                </form>           
            </div>
        </section>
    </div>
</div>
</div>
</body>
</html>